<script>
export default {
  data() {
    return {
      sectionName: '',
      sectionType: '',
      file: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },

  },
};
</script>

<template>
  <div class="section-container">
    <h3>添加小节</h3>
    <form>
      <div class="form-item">
        <label>小节名</label>
        <input type="text">
      </div>

      <div class="form-item">
        <label>小节类型</label>
        <select>
          <option value="video">视频</option>
          <option value="video-text">文本</option>
        </select>
      </div>

      <div class="form-item">
        <label for="fileUpload">上传视频:</label>
        <input type="file" id="fileUpload" ref="fileInput" accept=".mp4" @change="handleFileChange">
      </div>

      <div class="form-item">
        <label for="fileUpload">上传附件:</label>
        <input type="file" id="fileUpload" ref="fileInput" accept=".txt,.pdf" @change="handleFileChange">
      </div>




      <button style="margin-top: 60px" type="submit">提交</button>
    </form>
  </div>
</template>


<style scoped>
.section-container {
  min-height: 600px;
  max-width: 60%;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-item {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input[type="text"], select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #409eff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}
</style>
<!-- todo:文本编辑框未完成。且视频上传，文件上传位于后台对接 -->
